<template>
  <div style="height: 100%;padding-top: 5px;">
    <div class="user_left l_left" style=" margin-left: 0.6%">
      <div class="user_line1">
        <div class="user_line2">
          <div class="user_top_middle">
            <table class="table table-bordered" style="border-collapse: collapse;width: 100%">
              <tbody>
              <tr>
                <td>人员总数</td>
                <td colspan="3">965人</td>
              </tr>
              <tr>
                <td>在岗人员</td>
                <td>907人</td>
                <td>未在岗人员</td>
                <td>58人</td>
              </tr>
              <tr>
                <td>业主</td>
                <td>55人</td>
                <td>业主</td>
                <td>在岗（100%）</td>
              </tr>
              <tr>
                <td>总监</td>
                <td>23人</td>
                <td>总监</td>
                <td>在岗（96%）</td>
              </tr>
              <tr>
                <td>驻地监理</td>
                <td>244人</td>
                <td>驻地监理</td>
                <td>在岗（95%）</td>
              </tr>
              <tr>
                <td>施工单位</td>
                <td>643人</td>
                <td>施工单位</td>
                <td>在岗（93%）</td>
              </tr>
              </tbody>
            </table>
            <p>人员管理汇总</p>
          </div>
          <div class="user_left_top">
            <div class="user_top_left l_left">
              <div id="userContainerSex" style="height: 90%"></div>
              <p>工作人员性别占比</p>
            </div>
            <div class="user_top_left l_left">
              <div id="userContainerManage" style="height: 90%"></div>
              <p>各部门人员占比</p>
            </div>
            <div class="user_top_left l_left">
              <div id="userContainerAge" style="height:90%"></div>
              <p>工作人员持证占比</p>
            </div>
          </div>
          <div class="user_top_middle">
            <div id="userContainerAttendance" style="height: 90%"></div>
            <p>各部门出勤情况</p>
          </div>
        </div>
      </div>
    </div>
    <div class="user_left l_left" style=" margin-left: 0.6%">
      <div class="user_line1">
        <div class="user_line2">
          <div class="user_top_middle l_left">
            <div id="userContainerPersonal" style="height: 90%"></div>
            <p>工区管理人员出勤排行</p>
          </div>
          <div class="user_top_middle l_left">
            <div id="userContainerFlow" style="height: 90%"></div>
            <p>人员出勤分析</p>
          </div>
          <div class="user_top_middle l_left">
            <div id="userContainerIllegal" style="height: 90%"></div>
            <p>人员请假分析</p>
          </div>
        </div>
      </div>
    </div>
    <div class="user_left l_left" style=" margin-left: 0.6%">
      <div class="user_line1">
        <div class="user_line2">
          <div class="user_top_middle">
            <div id="userContainerComplaint" style="height: 90%"></div>
            <p>各部门出勤情况</p>
          </div>
          <div class="user_top_middle">
            <div id="userContainerPrize" style="height: 90%"></div>
            <p>工区勤假分析</p>
          </div>
          <div class="user_top_middle l_left">
            <div class="user_right_left l_left">
              <div id="userContainerReason" style="height: 90%"></div>
              <p>各部门出勤占比</p>
            </div>
            <div class="user_right_left l_left">
              <div id="userContainerHandle" style="height: 90%"></div>
              <p>各单位出勤占比</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {}
    }
  }
</script>

<style lang="scss" scoped>

  @import "~@/assets/screen/screen2/scss/common.scss";

  .user_left {
    width: 32.5%;
    height: 99%;
    background-color: rgba(2, 8, 23, 0.54);
    border-radius: 10px;
    position: relative;
  }

  .l_left {
    float: left;
  }

  .user_left {
    width: 32.5%;
    height: 99%;
    background-color: rgba(2, 8, 23, 0.54);
    border-radius: 10px;
    position: relative;
  }

  .user_line1 {
    border-radius: 10px;
    border: 1px #0174f5 solid;
    margin: 1px;
    height: 100%
  }

  .user_line2 {
    margin: 1px;
    border-radius: 9px;
    border: 2px #0b7ff3 solid;
    height: 100%;
    padding: 24px 8px 0 8px
  }

  .user_left_nav {
    position: absolute;
    top: 1px;
    left: 29%;
    width: 354px;
    height: 27px;
  }

  .user_left_top {
    height: 33%
  }

  .user_top_left {
    width: 33.3%;
    height: 100%;
  }

  .user_top_left p {
    text-align: center;
    color: #fff;
    font-size: 12px
  }

  .user_top_middle {
    height: 33%;
    width: 100%
  }

  .user_top_middle p {
    text-align: center;
    color: #fff;
    font-size: 12px
  }

  .user_top_middle thead tr {
    border: none !important;
  }

  .user_top_middle th, .user_top_middle td {
    line-height: 32px !important;
    padding: 0 !important;
    text-align: center;
    font-size: 14px;
    -webkit-transform: scale(0.8);
    border: 1px #3490ba solid !important;
    color: #fff;
  }

  .user_top_middle thead {
    background-color: #3490ba
  }

  .user_top_middle td {
    line-height: 32px !important;
    color: #dedfe0
  }

  .user_top_middle tbody tr {
    border-bottom: 1px #3490ba solid
  }

  .user_right_left {
    width: 50%;
    height: 100%
  }

</style>
